<template>
  <div class="home">
    <!-- 公共头部 -->
    <public-header></public-header>
    <!-- 首页列表 -->
    <el-row style="margin-top: 0px">
      <el-col :span="20" :offset="2">
        <el-menu class="el-menu-demo" mode="horizontal">
          <el-menu-item class="allPro" index="#">全部商品分类</el-menu-item>
          <el-menu-item index="1">戏剧</el-menu-item>
          <el-menu-item index="2">体育</el-menu-item>
          <el-menu-item index="3">亲子</el-menu-item>
          <el-menu-item index="4">舞蹈古典</el-menu-item>
          <el-menu-item index="5">摇滚</el-menu-item>
        </el-menu>
      </el-col>
    </el-row>
    <!-- 全部商品分类以及轮播图 -->
    <el-row>
      <el-col :span="4" :offset="2" style="">
        <ul class="proList">
          <li>
            <i class="el-icon-ice-cream-round"></i><span>演唱会</span
            ><i class="el-icon-arrow-right"></i>
          </li>
          <li>
            <i class="el-icon-service"></i><span>音乐会</span
            ><i class="el-icon-arrow-right"></i>
          </li>
          <li>
            <i class="el-icon-thumb"></i><span>歌剧话剧</span
            ><i class="el-icon-arrow-right"></i>
          </li>
          <li>
            <i class="el-icon-film"></i><span>曲苑杂坛</span
            ><i class="el-icon-arrow-right"></i>
          </li>
          <li>
            <i class="el-icon-attract"></i><span>体育比赛</span
            ><i class="el-icon-arrow-right"></i>
          </li>
          <li>
            <i class="el-icon-coordinate"></i><span>儿童亲子</span
            ><i class="el-icon-arrow-right"></i>
          </li>
          <li>
            <i class="el-icon-receiving"></i><span>舞蹈芭蕾</span
            ><i class="el-icon-arrow-right"></i>
          </li>
        </ul>
      </el-col>
      <el-col :span="16">
        <el-carousel height="418px">
          <el-carousel-item v-for="(item, index) in imgList" :key="index">
            <img :src="item" class="carouselImg" />
          </el-carousel-item>
        </el-carousel>
      </el-col>
    </el-row>
    <!-- 红线 -->
    <el-row class="line">
      <el-col class="clr" :span="4" :offset="2">
        <h1 style="opacity: 0">2</h1>
      </el-col>
    </el-row>
    <!-- 今日推荐以及即将开售卡片 -->
    <el-row style="margin-top: 20px; margin-bottom: 20px">
      <el-col class="tabs" :span="20" :offset="2" style="background: white">
        <el-tabs @tab-click="jijiang" v-model="activeName">
          <el-tab-pane label="今日推荐" name="first">
            <ul class="card">
              <li v-for="(item, index) in cardList" :key="index">
                <img :src="item.imgSrc" width="150" />
                <p>{{ item.title }}</p>
                <p>票价：{{ item.price | priceFormat }}</p>
              </li>
            </ul>
          </el-tab-pane>
          <el-tab-pane label="即将开售" name="second">
            <ul class="card">
              <li v-for="(item, index) in jijiangList" :key="index">
                <img :src="item.imgSrc" width="150" />
                <p>{{ item.title }}</p>
                <p>票价：{{ item.price | priceFormat }}</p>
              </li>
            </ul>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
    <homef :list="fList[0]" :rightList="rightList"></homef>
    <homef :list="fList[1]" :rightList="rightList"></homef>
    <homef :list="fList[2]" :rightList="rightList"></homef>
    <homef :list="fList[3]" :rightList="rightList"></homef>
    <homef :list="fList[4]" :rightList="rightList"></homef>
  </div>
</template>

<script>
import homef from "../components/homef.vue";
import publicHeader from "../components/publicHeader.vue";
import "../mockjs/Home/Mock";
export default {
  name: "Home",
  components: {
    publicHeader,
    homef,
  },
  data() {
    return {
      imgList: ["/images/pic1.jpg", "/images/pic2.jpg", "/images/pic3.jpg"], //轮播图片列表
      activeName: "first", //今日推荐卡片默认选中今日推荐
      cardList: [], //今日推荐内容
      jijiangList: [], //即将开售内容,
      fList: [
        { f: "1F", t: "戏剧达人", imgBig: "", li: [] },
        { f: "2F", t: "体育赛事", imgBig: "", li: [] },
        { f: "3F", t: "舞蹈古典", imgBig: "", li: [] },
        { f: "4F", t: "儿童亲子", imgBig: "", li: [] },
        { f: "5F", t: "摇滚在路上", imgBig: "", li: [] },
      ], //首页各层内容
      //大图数组存放
      bigImg: [
        "/images/big1.jpg",
        "/images/big2.jpg",
        "/images/big3.jpg",
        "/images/big4.jpg",
        "/images/big5.jpg",
      ],
      //小图数组存放
      smallImg: [
        "/images/cardimg1.jpg",
        "/images/cardimg2.jpg",
        "/images/cardimg3.jpg",
        "/images/cardimg4.jpg",
        "/images/cardimg5.jpg",
        "/images/cardimg6.jpg",
      ],
      //首页右侧存放
      rightList: [],
    };
  },
  methods: {
    //今日推荐卡片点击事件
    jijiang: function () {
      console.log("123");
    },
  },
  mounted() {
    //今日推荐列表
    this.$http.get("/card/list").then((res) => {
      this.cardList = res.data.userList;
      for (let i = 0; i < this.cardList.length; i++) {
        this.cardList[i].imgSrc = "/images/cardimg" + (i + 1) + ".jpg";
      }
    });
    //即将开售列表
    this.$http.get("/card/list").then((res) => {
      this.jijiangList = res.data.userList;
      // console.log(this.jijiangList);
      for (let i = this.jijiangList.length; i >= 0; i--) {
        this.jijiangList[i - 1].imgSrc = "/images/cardimg" + i + ".jpg";
      }
    });
    //首页每层内容
    this.$http.postRequest({
        type: "floorList",})
      .then((res) => {
        this.fList[0].imgBig = this.bigImg[res.data.floorList[0].bigIndex];
        for (let i = 0; i < 4; i++) {
          res.data.floorList[i].li.smallIndex =
            this.smallImg[res.data.floorList[i].li.smallIndex];
          this.fList[0].li.push(res.data.floorList[i].li);
        }
        for (let i = 0; i < res.data.floorList.length; i++) {
          this.rightList[i] = res.data.floorList[i].rightTxt;
        }
      });
    this.$http.post("/floor/list").then((res) => {
      //  console.log("right\t"+this.rightList);
    });
    this.$http.post("/floor/list").then((res) => {
      this.fList[1].imgBig = this.bigImg[res.data.floorList[0].bigIndex];
      for (let i = 0; i < 4; i++) {
        res.data.floorList[i].li.smallIndex =
          this.smallImg[res.data.floorList[i].li.smallIndex];
        this.fList[1].li.push(res.data.floorList[i].li);
      }
      for (let i = 0; i < res.data.floorList.length; i++) {
        this.rightList[i] = res.data.floorList[i].rightTxt;
      }
    });
    this.$http.post("/floor/list").then((res) => {
      this.fList[2].imgBig = this.bigImg[res.data.floorList[0].bigIndex];
      for (let i = 0; i < 4; i++) {
        res.data.floorList[i].li.smallIndex =
          this.smallImg[res.data.floorList[i].li.smallIndex];
        this.fList[2].li.push(res.data.floorList[i].li);
      }
      for (let i = 0; i < res.data.floorList.length; i++) {
        this.rightList[i] = res.data.floorList[i].rightTxt;
      }
    });
    this.$http.post("/floor/list").then((res) => {
      this.fList[3].imgBig = this.bigImg[res.data.floorList[0].bigIndex];
      for (let i = 0; i < 4; i++) {
        res.data.floorList[i].li.smallIndex =
          this.smallImg[res.data.floorList[i].li.smallIndex];
        this.fList[3].li.push(res.data.floorList[i].li);
      }
      for (let i = 0; i < res.data.floorList.length; i++) {
        this.rightList[i] = res.data.floorList[i].rightTxt;
      }
    });
    this.$http.post("/floor/list").then((res) => {
      this.fList[4].imgBig = this.bigImg[res.data.floorList[0].bigIndex];
      for (let i = 0; i < 4; i++) {
        res.data.floorList[i].li.smallIndex =
          this.smallImg[res.data.floorList[i].li.smallIndex];
        this.fList[4].li.push(res.data.floorList[i].li);
      }
      for (let i = 0; i < res.data.floorList.length; i++) {
        this.rightList[i] = res.data.floorList[i].rightTxt;
      }
    });
  },
  filters: {
    //格式化钱币
    priceFormat: function (a, b) {
      b = "¥";
      return b + a;
    },
  },
};
</script>
<style scoped>
.el-menu-demo {
  border: 1px solid #e8e8e8;
}
.el-menu-item {
  width: 100px;
}
.allPro {
  background-color: black;
  /* color: white; */
  width: 255px;
}
.proList {
  list-style: none;
  background-color: #ff3c1b;
  margin-top: -2px;
}
.proList li {
  height: 60px;
  line-height: 60px;
  color: white;
}
.proList li span {
  margin-left: 15px;
}
.proList li .el-icon-arrow-right {
  float: right;
  line-height: 60px;
  margin-right: 20px;
  opacity: 0.7;
}
.line {
  height: 40px;
  background-color: #a81316;
}
.clr {
  background-color: #ff3c1b;
}
.carouselImg {
  width: 100%;
  height: 418px;
  max-width: 100%;
}
.tabs {
  padding-left: 50px;
  padding-bottom: 25px;
}
.tabs .el-tab-pane {
  color: #ff3c1b;
}
.tabs ul li p {
  margin-top: 10px;
  color: grey;
  font-size: 13px;
  /* text-align: left; */
}
.card {
  display: flex;
  justify-content: space-around;
  list-style: none;
  text-align: left;
  margin-top: 10px;
}
</style>
